<!-- 没用到 -->
<template>
  <div ref="tablBox" class="tablBox">
    <el-table
      ref="table"
      :data="tableDataCopy.length == 0 ? tableData : tableDataCopy"
      style="width: 100%"
      stripe
      :show-header="true"
      :border="border"
      :max-height="height"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :span-method="spanMethod"
      :show-summary="showSummary"
      :summary-method="summaryMethod"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange"
      @select="handleSelection"
      @header-click="headerClick"
    >
      <el-table-column label="序号" type="index" align="center" width="55">
        <template slot-scope="scope">{{
          scope.$index + (page.page - 1) * page.size + 1
        }}</template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumns"
        v-if="item.show && !item.fixed"
        :key="item.id"
        :prop="item.column"
        :label="item.label + (item.specialLabel ? item.specialLabel : '')"
        :min-width="item.width"
        :fixed="item.fixed"
        :align="item.align"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
      >
        <template v-if="!item.fixed" slot="header">
          <span>{{
            item.label + (item.specialLabel ? item.specialLabel : "")
          }}</span>
          <el-popover
            :ref="'filterPanel' + index"
            placement="bottom"
            visible-arrow="false"
            trigger="click"
            @show="headerPopoverShow(item, index)"
            @hide="headerPopoverHide(item, index)"
          >
            <i
              slot="reference"
              style="margin-left: 5px;"
              class="el-icon-arrow-down"
              @click.stop
            />
            <div class="search-input">
              <!-- <el-input v-model="item.search" @input="headerInput" placeholder="请输入"></el-input> -->
              <input
                v-model="item.search"
                :placeholder="item.label"
                @input="headerInput(item, index)"
              />
            </div>
            <div class="header-table">
              <el-table
                :ref="'headerTable' + item.label"
                :data="item.filters"
                max-height="350"
                :border="false"
                @selection-change="headerTableSelection"
                @row-click="headerTableClick"
              >
                <el-table-column width="30" align="center" type="selection" />
                <el-table-column
                  align="left"
                  prop="value"
                  :min-width="item.filterWidht"
                  label="全选"
                  header-align="left"
                />
              </el-table>
              <div class="headerTable-bottom">
                <el-button
                  type="text"
                  size="small"
                  @click="headerFilter(item, index)"
                  >筛选</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="headeronReset(index)"
                  >重置</el-button
                >
              </div>
            </div>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <!-- :ref="`popover-${scope.column.property}-${scope.row.id}`" -->
          <el-popover
            v-if="scope.row.visible"
            :ref="`popover-${scope.column.property}-${scope.row.id}`"
            width="800"
            trigger="manual"
            visible-arrow="false"
            placement="bottom-start"
            @hide="popoverHide(scope)"
          >
            <div slot="reference">
              <p>{{ scope.row[item.column] }}</p>
            </div>
            <div>
              <div class="top-text">债券明细数据</div>
              <el-table :data="tableInfoData" max-height="300">
                <el-table-column
                  v-for="(item1, index1) in infoTableColumn"
                  :key="item1.label + index1"
                  :min-width="item1.width"
                  :prop="item1.column"
                  :label="item1.label"
                  align="center"
                />
              </el-table>
            </div>
          </el-popover>
          <span v-else>{{ scope.row[item.column] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumns"
        v-if="item.show && item.fixed"
        :key="item.id"
        :prop="item.column"
        :label="item.label + (item.specialLabel ? item.specialLabel : '')"
        :min-width="item.width"
        :fixed="item.fixed"
        :align="item.align"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.visible"
            :ref="`popover-${scope.column.property}-${scope.row.id}`"
            width="800"
            trigger="manual"
            visible-arrow="false"
            placement="bottom-start"
            @hide="popoverHide(scope)"
          >
            <div slot="reference">
              <p>{{ scope.row[item.column] }}</p>
            </div>
            <div>
              <div class="top-text">债券明细数据</div>
              <el-table :data="tableInfoData" max-height="300">
                <el-table-column
                  v-for="(item1, index1) in infoTableColumn"
                  :key="item1.label + index1"
                  :min-width="item1.width"
                  :prop="item1.column"
                  :label="item1.label"
                  align="center"
                />
              </el-table>
            </div>
          </el-popover>
          <span v-else>{{ scope.row[item.column] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- </div> -->
    <!-- </el-scrollbar> -->
    <!-- </div> -->
  </div>
</template>

<script>
import { log } from "util";
import { setTimeout, clearTimeout } from "timers";
import { showDetailDataByGroup } from "@/api/distribution/dataOverview";
import { getBondDetails } from "@/api/distribution/monitoring";
import { getBondDetailslirun } from "@/api/distribution/positionsProfit";
import {
  getBondPandect,
  getBondServiceIntoPandect,
  getBondServiceOutPandect,
} from "@/api/mainapi/mainapi";
import moment from "moment";
// 这是12.06封装的组件 之前的组件 头部筛选框
// 使用$set 和 = 都不会驱动视图的变化
// 这个组件 是直接使用之前的头部筛选框代码 还需后期优化 替换$set
export default {
  components: {
    // ExportImgPanel
  },
  props: {
    infoTableColumn: {
      type: Array,
      default: () => {},
    },
    page: {
      default: () => {},
    },
    tableData: {
      type: Array,
      default: () => {},
    },
    tableColumns: {
      type: Array,
      default: () => {},
    },
    border: {
      type: Boolean,
      default: false,
    },
    height: {
      type: Number,
      default: null,
    },
    showHandle: {
      type: Boolean,
      default: false,
    },
    showIndex: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
    spanMethod: {
      type: Function,
      default: () => {},
    },
    summaryMethod: {
      type: Function,
      default: () => {},
    },
    rowStyle: {
      type: Function,
      default: () => {},
    },
    /* editRowIndexArr: {
      type: Array,
      default: () => {}
    },
    isRowEdit: {
      type: Boolean,
      default: false
    }, */
    isEdit: {
      type: Boolean,
      default: true,
    },
    cellStyle: {
      type: Function,
      default: () => {},
    },
    // headerCellStyle: {
    //   type: Function,
    //   default: () => {}
    // },
    renderHeader: {
      type: Function,
      default: () => {},
    },
    tableTitle: {
      type: String,
      default: "",
    },
    checkConfig: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      showTable: false,
      infoTableData: [],
      rowHeight: 35,
      tableInfoData: [],
      // search: "",
      // filterPanelVisible: false,
      // headerTableData: [],
      // sortOrder: "none",
      timer: null,
      filtersData: [],
      headerSelection: [],
      tableDataCopy: [],
      isHeaderSearch: false,
      headerFilterLabel: [],
      // pageIndex: Math.random()
      //   maxheight: 0,
    };
  },
  computed: {},
  watch: {
    tableColumns: {
      handler: function(newValue, oldValue) {},
      deep: true,
      immediate: true,
    },
    tableData: {
      handler: function(newValue, oldValue) {
        // 筛选之后 点击字段查看明细 会触发tableData的监听事件
        // 所以不能在 这里清空 tableDataCopy 和isHeaderSearch
        // 增加page的监听事件 如果更换新的页面 就重新渲染
        console.log("监听tableData");
        // this.isHeaderSearch = false;
        this.getFilter();
        // this.tableDataCopy = [];
        // console.log(this.tableColumns, "this.tableColumns2222");
      },
      deep: true,
      immediate: true,
    },
    page: {
      handler: function(newValue, oldValue) {
        console.log(newValue, "newValuePage");
        this.isHeaderSearch = false;
        this.tableDataCopy = [];
        this.headerFilterLabel = [];
        this.getFilter();
      },
      deep: true,
      immediate: true,
    },
  },
  activated() {},
  mounted() {
    // this.fetchdata();
    // this.$nextTick(() => {
    //   this.$refs.basetable.doLayout(); //解决表格错位
    // })
    // this.$refs.scroll.$el.style.height =
    //   this.$refs.tablBox.clientHeight - 180 + "px";
    // 监听滚动条事件
    // this.handleScroll();
  },
  methods: {
    getFilter() {
      if (!this.isHeaderSearch) {
        this.tableColumns.forEach((item, index) => {
          item.id = Math.random();
          // item.filters1 = null;
          // item.headerTableSearch = true;
          // item.id = index;
          // item.sortOrder = "none";
          // item.filterPanel = false;
          if (!item.fixed) {
            item.filters = [];
            const arr = [];
            const num = [];
            this.tableData.forEach((item1, index1) => {
              item1.id = index1;
              if (item1[item.column]) {
                num.push(item1[item.column].length * 14);
              }
              arr.push(item1[item.column]);
            });
            // console.log(Math.max(...num), "num");
            // console.log(Array.from(new Set(arr)), "Array.from(new Set(arr))");
            let filterHeaderData = [];
            if (item.label == "时间") {
              filterHeaderData = Array.from(new Set(arr)).sort(function(a, b) {
                if (new Date(a) && new Date(b)) {
                  const x = new Date(a);
                  const y = new Date(b);
                  return x < y ? -1 : x > y ? 1 : 0;
                } else {
                  return;
                }
              });
            } else {
              filterHeaderData = Array.from(new Set(arr)).sort();
            }
            filterHeaderData.forEach((item2) => {
              // console.log(item2, "item2");
              if (item2) {
                item.filters.push({
                  text: item2,
                  value: item2,
                  id: item.label,
                  // width: item2.length * 14
                });
              }
            });
            item.filterWidht = Math.max(...num);
          }
        });
      }
    },
    filternumMethod({ value, row, column }) {
      return parseInt(row.num) > value;
    },
    deleteHandle(row, rowIndex) {
      this.$emit("deleteHandle", { row, rowIndex });
    },
    handleSelectionChange(rows) {
      // 用一个变量来存放被选中的index
      const selectionItemIndexes = [];
      rows.forEach((item) => {
        selectionItemIndexes.push(item.index);
      });
      this.$emit("handleSelectionChange", { rows, selectionItemIndexes });
    },
    /* tableRowClassName(row) {
      // 设置row对象的index
      // row.row.index = row.rowIndex
      // console.log(row)
    }, */
    //  文本框获得焦点事件
    inputFocus() {
      this.$emit("inputFocus");
    },
    handleSelection(selection, row) {
      this.$emit("handleSelection", { selection, row });
    },
    keyDown(e) {},
    headerClick(column, event) {
      // console.log("headerClick");
      //   this.$emit('headerClick',column)
    },
    popoverHide(scope) {
      // console.log("关闭popover");
      // console.log(row, "row");
      const refStr = `popover-${scope.column.property}-${scope.row.id}`;
      // if (scope.row.visible) {
      this.$refs[refStr][0].doClose();
      // scope.row.visible = false;
      // this.$set(scope.row, "visible", false);
      // }
      // console.log(scope, "scope");
    },
    cellClick(row, column, cell, e) {
      // console.dir(cell, "cell");
      // console.dir(column, "column");
      console.log(row, "row");
      // console.log(row[column.property], "column.property");
      // if (row[column.property] === null) return;
      // return;
      const refStr = `popover-${column.property}-${row.id}`;
      // console.log(this, "this");
      console.log(refStr, "refStr1111111111");

      if (row.visible) {
        console.log(this, "true Thgis");
        if (this.$refs[refStr] && this.$refs[refStr].length != 0) {
          this.$refs[refStr][0].doClose();
        } else {
          // this.$refs[refStr].doClose();
        }
        // this.$refs[refStr][0].doClose();
        row.visible = false;
        return false;
      }
      if (this.tableDataCopy.length != 0) {
        // this.isHeaderSearch = true;
        this.$set(this, "isHeaderSearch", true);
        this.tableDataCopy.forEach((item) => {
          this.$set(item, "visible", false);
        });
      } else {
        this.tableData.forEach((item, index) => {
          // console.log(item.visible, "visible");
          // item.visible = false;
          this.$set(item, "visible", false);
        });
      }

      // row.visible = true;
      this.$set(row, "visible", true);
      // this.$nextTick(() => {
      console.log(this, "this");
      // });
      // return;

      let funcIndex = 0;
      let params = {
        issuerRating: row.issuerrating,
        bondType: row.bondtype,
        theLeadUnderwriter: row.theleadunderwriter,
        issuerPerson: row.issuerperson,
        principalHeadPerson: row.principalheadperson,
        byYear: row.byyear,
        byQuarter: row.byquarter,
        byMonth: row.bymonth,
        // issuerrating showDetailDataByGroup
      };

      if (this.tableTitle == "代申购业务") {
        params.query_type = "PURCHASE";
        params.effactiveDate_start = row.effactiveDate_start;
        params.effactiveDate_end = row.effactiveDate_end;
      }
      if (this.tableTitle == "代缴款业务") {
        params.query_type = "PAYMENT";
        params.effactiveDate_start = row.effactiveDate_start;
        params.effactiveDate_end = row.effactiveDate_end;
      }
      if (this.tableTitle == "分销销售佣金分析") {
        params.query_type = "COMMISSION";
        params.effactiveDate_start = row.effactiveDate_start;
        params.effactiveDate_end = row.effactiveDate_end;
      }

      if (
        this.tableTitle == "FI持仓监控" ||
        this.tableTitle == "FI00持仓监控"
      ) {
        funcIndex = 1;
        params = {
          dataDateStr: row.dataDateStr,
          dataDateEnd: row.dataDateEnd,
          // secId: row.secId,
          fiFi00: this.tableTitle == "FI持仓监控" ? "FI" : "FI00",
          isTraderName: row.traderNm,
          isType: row.type,
          isIssuerRating: row.issuerRating,
          isTxnDt: row.txnDt,
          // ...row
        };
        // if (row.effMonth) params.isMonth = row.effMonth;
        // if (row.effSeason) params.isSeason = row.effSeason;
        // if (row.effYear) params.isYear = row.effYear;
        // console.log(row, "row");
        // return;
      } else if (
        this.tableTitle == "FI持仓利润" ||
        this.tableTitle == "FI00持仓利润"
      ) {
        funcIndex = 2;
        params = {
          dataDateStr: row.dataDateStr,
          dataDateEnd: row.dataDateEnd,
          // secId: row.secId,
          isTraderName: row.traderNm,
          isType: row.type,
          isIssuerRating: row.issuerRating,
          fiFi00: this.tableTitle == "FI持仓利润" ? "FI" : "FI00",
          isTxnDt: row.txnDt,
        };
      } else if (this.tableTitle == "主承业务概览") {
        funcIndex = 3;
        params = {
          dataDateStr: row.dataDateStr,
          dataDateEnd: row.dataDateEnd,
          isIssuerRating: row.issuerRating,
          isType: row.type,
          isIssuerNm: row.issuerNm,
          isTraderNm: row.traderNm,
          isBranchNm: row.branchNm,
        };
        if (row.effMonth) params.isMonth = row.effMonth;
        if (row.effSeason) params.isSeason = row.effSeason;
        if (row.effYear) params.isYear = row.effYear;
        if (row.ifLocatedInBranch) {
          params.isLocatedInBranch = row.ifLocatedInBranch == "是" ? "Y" : "N";
        }
        if (row.isNbcbLeader) {
          params.isIsNBCBLeader = row.isNbcbLeader == "是" ? "Y" : "N";
        }
      } else if (this.tableTitle == "手续费收入") {
        funcIndex = 4;
        params = {
          dataDateStr: row.dataDateStr,
          dataDateEnd: row.dataDateEnd,
          isIssuerRating: row.issuerRating,
          isType: row.type,
          isIssuerNm: row.issuerNm,
          isTraderNm: row.traderNm,
          isBranchNm: row.branchNm,
        };
        if (row.effMonth) params.isMonth = row.effMonth;
        if (row.effSeason) params.isSeason = row.effSeason;
        if (row.effYear) params.isYear = row.effYear;
        if (row.ifLocatedInBranch) {
          params.isLocatedInBranch = row.ifLocatedInBranch == "是" ? "Y" : "N";
        }
        if (row.isNbcbLeader) {
          params.isIsNBCBLeader = row.isNbcbLeader == "是" ? "Y" : "N";
        }
      } else if (this.tableTitle == "手续费支出") {
        funcIndex = 5;
        params = {
          dataDateStr: row.dataDateStr,
          dataDateEnd: row.dataDateEnd,
          isIssuerRating: row.issuerRating,
          isType: row.type,
          isIssuerNm: row.issuerNm,
          isTraderNm: row.traderNm,
          isBranchNm: row.branchNm,
        };
        if (row.effMonth) params.isMonth = row.effMonth;
        if (row.effSeason) params.isSeason = row.effSeason;
        if (row.effYear) params.isYear = row.effYear;
        if (row.ifLocatedInBranch) {
          params.isLocatedInBranch = row.ifLocatedInBranch == "是" ? "Y" : "N";
        }
        if (row.isNbcbLeader) {
          params.isIsNBCBLeader = row.isNbcbLeader == "是" ? "Y" : "N";
        }
      }

      for (var key in params) {
        if (params[key] === null || params[key] === "") {
          if (
            this.tableTitle == "手续费支出" ||
            this.tableTitle == "手续费收入" ||
            this.tableTitle == "主承业务概览" ||
            this.tableTitle == "FI持仓利润" ||
            this.tableTitle == "FI00持仓利润" ||
            this.tableTitle == "FI持仓监控" ||
            this.tableTitle == "FI00持仓监控"
          ) {
            params[key] = false;
          } else {
            params[key] = "null";
          }
        }
      }
      console.log(params, "params");

      // return false;
      // console.log(this.$refs[refStr], "this.$refs[refStr][0]111");
      const func = [
        showDetailDataByGroup,
        getBondDetails,
        getBondDetailslirun,
        getBondPandect,
        getBondServiceIntoPandect,
        getBondServiceOutPandect,
      ];
      func[funcIndex](params).then((res) => {
        // console.log(res, "resssssss");
        if (res.results && res.results.length >= 0) {
          res.results.forEach((item) => {
            // if (funcIndex == 0) {
            //   if (item.distributionamount)
            //     item.distributionamount = item.distributionamount / 100000000;
            //   if (item.salescommission)
            //     item.salescommission = item.salescommission / 100000000;
            //   if (item.effactivedate)
            //     item.effactivedate = moment(item.effactivedate).format(
            //       "yyyy-MM-DD"
            //     );
            // } else if (funcIndex == 1) {
            //   if (item.effDate)
            //     item.effDate = moment(item.effDate).format("yyyy-MM-DD");
            //   if (item.settledQtty)
            //     item.settledQtty = item.settledQtty / 100000000;
            // }
            if (funcIndex == 0) {
              if (item.distributionamount) {
                item.distributionamount = this.saveTwo(
                  item.distributionamount / 100000000
                );
              }
              if (item.salescommission) {
                item.salescommission = this.saveTwo(
                  item.salescommission / 100000000
                );
              }
              if (item.issueamount) {
                item.issueamount = this.saveTwo(item.issueamount / 100000000);
              }

              if (item.effactivedate) {
                item.effactivedate = moment(item.effactivedate).format(
                  "yyyy-MM-DD"
                );
              }
              if (item.maturitydate) {
                item.maturitydate = moment(item.maturitydate).format(
                  "yyyy-MM-DD"
                );
              }
            } else if (funcIndex == 1) {
              if (item.effDate) {
                item.effDate = moment(item.effDate).format("yyyy-MM-DD");
              }
              if (item.settledQtty) {
                item.settledQtty = this.saveTwo(item.settledQtty / 100000000);
              }
            } else if (funcIndex == 2) {
              if (item.effDate) {
                item.effDate = moment(item.effDate).format("yyyy-MM-DD");
              }
              if (item.sumMoney) {
                this.saveTwo((item.sumMoney = item.sumMoney / 100000000));
              }
              if (item.profitEodDays) {
                item.profitEodDays = this.saveTwo(
                  item.profitEodDays / 100000000
                );
              }
            } else if (funcIndex == 3) {
              if (item.effDate) {
                item.effDate = moment(item.effDate).format("yyyy-MM-DD");
              }
              if (item.issueAmount) {
                item.issueAmount = this.saveTwo(item.issueAmount / 100000000);
              }
              if (item.commission) {
                item.commission = this.saveTwo(item.commission / 100000000);
              }
              if (item.underwritingShare) {
                item.underwritingShare = this.saveTwo(
                  item.underwritingShare / 100000000
                );
              }
            } else if (funcIndex == 4) {
              // 手续费收入
              if (item.effDate) {
                item.effDate = moment(item.effDate).format("yyyy-MM-DD");
              }
              if (item.issueAmount) {
                item.issueAmount = this.saveTwo(item.issueAmount / 100000000);
              }
              if (item.commission) {
                item.commission = this.saveTwo(item.commission / 100000000);
              }
              if (item.underwritingShare) {
                item.underwritingShare = this.saveTwo(
                  item.underwritingShare / 100000000
                );
              }
            } else if (funcIndex == 5) {
              // 手续费支出
              if (item.effDate) {
                item.effDate = moment(item.effDate).format("yyyy-MM-DD");
              }
              if (item.issueAmount) {
                item.issueAmount = this.saveTwo(item.issueAmount / 100000000);
              }
              if (item.commission) {
                item.commission = this.saveTwo(item.commission / 100000000);
              }
              if (item.underwritingShare) {
                item.underwritingShare = this.saveTwo(
                  item.underwritingShare / 100000000
                );
              }
            }
          });
          console.log(this, "this");
          // console.log(this.$refs[refStr], "this.$refs[refStr]");
          this.tableInfoData = res.results;

          if (this.$refs[refStr] && this.$refs[refStr].length != 0) {
            this.$refs[refStr][0].doShow();
          } else {
            row.visible = false;
            return false;
            // this.$refs[refStr].doShow();
          }
        }
      });

      // setTimeout(() => {
      //   // console.log(this.$refs[refStr], "this.$refs[refStr]");
      //   this.$refs[refStr][0].doShow();
      // }, 100);
    },
    saveTwo(num) {
      const str = num + "";
      return str.substr(0, str.indexOf(".") + 3);
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    headerTableClick(row, column, event) {
      const tableRef = "headerTable" + row.id;
      if (this.$refs[tableRef].length != 0) {
        this.$refs[tableRef][0].toggleRowSelection(row);
      } else {
        this.$refs[tableRef].toggleRowSelection(row);
      }
    },
    headerTableSelection(selection) {
      if (selection.length == 0) {
        this.removeArr(this.headerSelection);
      } else {
        this.removeArr(this.headerSelection);
        selection.forEach((item, index) => {
          this.headerSelection.splice(index, 1, item);
        });
      }
    },
    headerCellStyle(row, column, rowIndex, columnIndex) {
      if (this.headerFilterLabel.includes(row.column.label)) {
        return {
          color: "#409eff",
        };
      } else {
        return {
          color: "#fff",
        };
      }
    },
    headerFilter(item, index) {
      const arr = this.headerSelection.map((item1) => {
        return item1.value;
      });
      if (arr.length != 0) {
        this.headerFilterLabel.push(item.label);
      } else {
        this.headerFilterLabel.forEach((label, index) => {
          if (item.label == label) {
            label = "";
          }
        });
      }
      console.log(arr, "arr123123");
      const arr1 = [];
      if (this.tableDataCopy.length == 0) {
        this.tableData.forEach((item2) => {
          if (arr.includes(item2[item.column])) {
            arr1.push(item2);
          }
        });
      } else {
        this.tableDataCopy.forEach((item2) => {
          if (arr.includes(item2[item.column])) {
            arr1.push(item2);
          }
        });
      }
      this.tableDataCopy = arr1;
      // this.tableData = arr1;
      this.isHeaderSearch = true;
      const popoverRef = "filterPanel" + index;
      if (this.$refs[popoverRef].length != 0) {
        this.$refs[popoverRef].forEach((item) => {
          item.doClose();
        });
      } else {
        this.$refs[popoverRef].doClose();
      }
    },
    headeronReset(index) {
      const popoverRef = "filterPanel" + index;
      if (this.$refs[popoverRef].length != 0) {
        this.$refs[popoverRef].forEach((item) => {
          item.doClose();
        });
        this.tableDataCopy = [];
        this.headerSelection = [];
        this.headerFilterLabel = [];
        this.isHeaderSearch = false;
        this.$parent.getData();
      } else {
        this.$refs[popoverRef].doClose();
      }
    },
    headerInput(item, index) {
      clearTimeout(this.timer);
      const noSet = [];
      const yeseSet = [];
      if (true) {
        this.headerSelection = [];
        this.tableColumns.forEach((tabCol) => {
          if (tabCol.column == item.column) {
            this.tableData.forEach((item1) => {
              noSet.push(item1[tabCol.column]);
            });
            Array.from(new Set(noSet)).forEach((item2) => {
              if (item2) {
                yeseSet.push({
                  text: item2,
                  value: item2,
                });
              }
            });
          }
        });
        // 因为$set不能驱动视图层变化 所以循环使用splice
        yeseSet.forEach((yset, yindex) => {
          item.filters.splice(yindex, 1, yset);
        });
        // return;
      }
      const arr = [];
      this.timer = setTimeout(() => {
        item.filters.forEach((item1) => {
          const str = item1.value;
          if (str.indexOf(item.search) != -1) {
            arr.push(item1);
          }
        });
        if (item.filters.length != 0) {
          this.removeArr(item.filters);
        }
        arr.forEach((ar, arIndex) => {
          item.filters.splice(arIndex, 1, ar);
        });
      }, 500);
    },
    removeArr(arr) {
      // 因为赋值为空 或 $set设置为空 都不能驱动视图层变化 所以使用splice删除数组
      for (var i = 0; i < arr.length; i++) {
        arr.splice(i, 1);
        if (arr.length != 0) this.removeArr(arr);
      }
    },
    headerPopoverShow(column, i) {
      console.log("筛选弹框打开");
    },
    headerPopoverHide(column, i) {
      console.log("筛选弹框关闭");
      this.tableColumns.forEach((item) => {
        // item.id = Math.random();
        // item.filters1 = null;
        item.search = "";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// .tablBox {
//   // display: flex;
// }
// ::v-deep.scroll-table {
//   .el-table__fixed-body-wrapper {
//     top: 46px !important;
//   }
//   // width: 800px;
//   height: 400px;
//   .el-scrollbar__wrap {
//     // margin: 0;
//     // overflow: scroll;
//     // height: 100%;
//     // overflow-x: auto !important;
//     .el-scrollbar__view {
//       width: 100%;
//       // height: 100%;
//       //   float: left;
//       display: inline-block;
//       //   white-space: nowrap;
//     }
//   }
//   .is-vertical {
//     width: 6px !important;
//     z-index: 99;
//     position: absolute;
//   }
//   .is-horizontal {
//     height: 6px !important;
//     z-index: 99;
//     position: absolute;
//   }
// }
</style>
